<template>
  <div class="app-container">
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @row-click="setIndex"
    >
      <el-table-column align="center" prop="index" label="序号" width="80">
        <template #default="{$index}">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="a"
        width="180"
        align="center"
      >
        <template #default="{row,$index}">
          <el-input :ref="`input${3*$index + 1}`" v-model.trim="row.a" :placeholder="`input${3*$index + 2}`" clearable="" @input="switchTab(row.a,$index,`input${3*$index + 2}`)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="b"
        align="center"
        width="180"
      >
        <template #default="{row,$index}">
          <el-input :ref="`input${3*$index + 2}`" v-model.trim="row.b" placeholder="b" clearable="" @input="switchTab(row.b,$index,`input${3*$index + 3}`)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="c"
        align="center"
        width="180"
      >
        <template #default="{row,$index}">
          <el-input :ref="`input${3*$index + 3}`" v-model.trim="row.c" placeholder="c" clearable="" @input="switchTab(row.c,$index,`input${3*$index + 4}`)" />
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="d"
        align="center"
        width="180"
      >
        <template #default="{row}">
          <el-input v-model.trim="row.d" placeholder="c" clearable="" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="Location"
        label="血袋位置"
        width="150"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.Location"
            size="mini"
            placeholder="血袋位置"
            clearable
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="操作"
        label="operate"
        align="center"
        width="180"
      >
        <template #header>
          <el-link type="primary" @click="addRow">增加</el-link>
        </template>
        <template #default="{$index}">
          <el-link type="danger" @click="delRow($index)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{}],
      currentIndex: 0
    }
  },
  mounted() {
    this.enterKeyup()
  },
  methods: {
    addRow() {
      this.tableData.push({
        a: '',
        b: '',
        c: ''
      })
    },
    delRow(index) {
      this.tableData.splice(index, 1)
    },
    switchTab(value, index, ref) {
      this.currentIndex = index
      if (value.length === 2) {
        if (this.$refs[ref]) {
          this.$refs[ref].focus()
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    setIndex(row) {
      this.currentIndex = row.index
    },
    enterKeyup() {
      document.addEventListener('keyup', this.enterKey)
    },
    enterKey(event) {
      const code = event.keyCode
        ? event.keyCode
        : event.which
          ? event.which
          : event.charCode

      if (code === 13) {
        const index = this.currentIndex + 1
        this.currentIndex = index
        const ref = `input${3 * index + 1}`
        if (this.$refs[ref]) {
          this.$refs[ref].focus()
        }
      }
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
